<script setup>
import Header from '@/components/header/Header.vue'
import Tab from './components/Tab.vue'
import Card from './components/Card.vue'
import HaishuaCard from './components/HaishuaCard.vue'
import PandaCard from './components/PandaCard.vue'
import { computed, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import api from '@/api/index.js'
import { useKeepalive } from '@/hooks/useKeepalive.js'

defineOptions({
  name: 'OrderList',
})

const needSaveRoute = [
  'scenicOrderDetail',
  'pandaOrderDetail',
  'scenicDetail',
  'hotelDetail',
]
const { scrollYEle } = useKeepalive(needSaveRoute, 'OrderList')

const list = ref([])
const error = ref(false)
const loading = ref(true)
const finished = ref(true)
const refreshing = ref(false)
const totalCount = ref(0)
const route = useRoute()

const type = route.query.title

let getOrderList = null
const title = ref('')
const initPage = () => {
  if (type === 'scenic') {
    getOrderList = api.getScenicOrderList
    title.value = '活动预约订单'
  } else if (type === 'panda') {
    getOrderList = api.getOrderList
    title.value = '熊猫金卡订单'
  } else if (type === 'haishua') {
    getOrderList = api.getOrderList
    title.value = '嗨耍卡订单'
  } else if (type === 'hotel') {
    getOrderList = api.getHotelOrderList
    title.value = '酒店订单'
  } else if (type === 'hotPot') {
    getOrderList = api.getHotPotOrderList
    // title.value = "餐饮订单";
    title.value = '活动订单'
  }
}
initPage()

const params = {
  pageNum: 1,
  pageSize: 10,
}
const ordinaryFinished = ref(false)
const _getOrderList = () => {
  error.value = false
  loading.value = true
  if (type === 'panda') params['cardType'] = 0
  else if (type === 'haishua') params['cardType'] = 1
  getOrderList(params)
    .then((res) => {
      list.value = [...list.value, ...res.data.list]
      totalCount.value = res.data.totalCount
      params.pageNum += 1
      if (list.value.length >= res.data.totalCount) {
        if (type === 'scenic') {
          ordinaryFinished.value = true
          loading.value = true
          _getPandaOrderList()
        } else {
          loading.value = false
          finished.value = true
        }
      } else {
        ordinaryFinished.value = false
        loading.value = false
      }
    })
    .catch(() => {
      error.value = true
      loading.value = false
    })
    .finally(() => {
      refreshing.value = false
    })
}

const pandaParams = {
  goodsType: 0,
  pageNum: 1,
  pageSize: 10,
}
const pandaOrderList = ref([])

// 普通订单 订单状态:0-待支付 1-待核销 2-已核销 3-已取消 4-退款中 5-已退
// 熊猫订单 订单状态 0-待支付 1-待使用/待发货 2-待收货 3-已完成 4-退款单 6-订单已取消
const _getPandaOrderList = () => {
  loading.value = true
  finished.value = false
  error.value = false
  api
    .getPandaOrderList({ ...pandaParams, status: params.status })
    .then((res) => {
      pandaParams.pageNum += 1
      pandaOrderList.value = [...pandaOrderList.value, ...res.data]
      if (!res.data.length) {
        finished.value = true
      } else {
        finished.value = false
      }
    })
    .catch(() => {
      error.value = true
    })
    .finally(() => {
      loading.value = false
      refreshing.value = false
    })
}
const onLoad = () => {
  loading.value = true
  finished.value = false
  if (type === 'scenic') {
    if (!ordinaryFinished.value) {
      _getOrderList()
    } else {
      _getPandaOrderList()
    }
  } else {
    _getOrderList()
  }
}
onLoad()

const onRefresh = () => {
  loading.value = true
  resetting()
}

const resetting = () => {
  params.pageNum = 1
  pandaParams.pageNum = 1
  list.value = []
  ordinaryFinished.value = false
  onLoad()
}

const changeTab = (key) => {
  loading.value = true
  params.status = key
  pandaOrderList.value = []
  resetting()
}

watch(error, (val) => {
  if (!val) {
    loading.value = true
    resetting()
  }
})

const isShowVanList = computed(() => {
  if (list.value.length || pandaOrderList.value.length) {
    return true
  }
  if (loading.value || refreshing.value) {
    return true
  }
  if (error.value) {
    return true
  }
  return false
})

// 刷新页面数据
const cancelOrderResetting = () => {
  resetting()
}
</script>

<template>
  <div class="order">
    <Header :title="title" :back="true" path="/mine" />
    <Tab :type="type" @changeTab="changeTab" />
    <div class="content" ref="scrollYEle">
      <van-pull-refresh
        class="van_pull_refresh"
        v-model="refreshing"
        @refresh="onRefresh"
      >
        <van-list
          v-if="isShowVanList"
          v-model:loading="loading"
          v-model:error="error"
          :finished="finished"
          finished-text="没有更多了"
          error-text="请求失败，点击重新加载"
          @load="onLoad"
        >
          <template v-if="type === 'panda' || type === 'haishua'">
            <HaishuaCard
              class="list"
              v-for="item in list"
              :key="item"
              :data="item"
              @cancelOrderResetting="cancelOrderResetting"
              :type="type"
            />
          </template>
          <template v-else>
            <Card
              class="list"
              v-for="item in list"
              :key="item"
              :data="item"
              @cancelOrderResetting="cancelOrderResetting"
              :type="type"
            />
            <PandaCard
              class="list"
              v-for="item in pandaOrderList"
              :key="item"
              :data="item"
              @cancelOrderResetting="cancelOrderResetting"
            />
          </template>
        </van-list>
        <div v-else>
          <div class="none">
            <img
              class="none_img"
              src="@/assets/images/index/none1.png"
              alt=""
            />
            <span>暂无订单信息，去逛逛</span>
          </div>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<style scoped lang="scss">
.order {
  display: flex;
  flex-direction: column;
  height: 100%;

  .content {
    flex: 1;
    background: #f9f8f3;
    overflow-y: auto;
    padding-top: 1.5rem;

    .van_pull_refresh {
      min-height: 100%;

      .list {
        margin: 0 1.5rem 1.5rem 1.5rem;
      }

      .none {
        display: flex;
        flex-direction: column;
        align-items: center;

        .none_img {
          width: 6rem;
          margin: 14.4rem 0 1rem 0;
        }

        span {
          font-size: 1.4rem;
          color: #666666;
        }
      }
    }
  }
}
</style>